import { Button, Form, Input, Radio, Select,} from "antd";
import {Link, useLocation, Outlet, useNavigate} from "react-router-dom";
import "./Help.css";
import {useEffect, useState} from "react";
import axios from "axios";

const {Option} = Select;

// 大陆地区
const provinces = [
    '河北省', '山西省', '辽宁省', '吉林省', '黑龙江省', '江苏省',
    '浙江省', '安徽省', '福建省', '江西省', '山东省', '河南省', '湖北省',
    '湖南省', '广东省', '海南省', '四川省', '贵州省', '云南省', '陕西省',
    '甘肃省', '青海省', '内蒙古自治区', '广西壮族自治区', '西藏自治区',
    '宁夏回族自治区', '新疆维吾尔自治区','北京市', '天津市', '上海市', '重庆市',
]


export default function Help() {
    // React的原生Hook
    const [title, setTitle] = useState('');   // 标题
    const [info, setInfo] = useState('');  // 求助信息
    const [contact, setContact] = useState('');
    const [province, setProvince] = useState(''); // 省份
    const [signal, setSignal] = useState(''); // 暗号

    // antd的Hook
    const [form] = Form.useForm();

    const navigate = useNavigate();  // 不能在函数中使用,

    const formItemLayout = {
                labelCol: {
                    span: 4,
                },
                wrapperCol: {
                    span: 14,
                },
            };
    const buttonItemLayout = {
                wrapperCol: {
                    span: 14,
                    offset: 4,
                },
            };

    function handleChangeTitle(e) {
        // console.log(e.target.value);
        setTitle(e.target.value);
    }

    function handleChangeInfo(e) {
        setInfo(e.target.value);
    }

    function handleChangeContact(e) {
        setContact(e.target.value);
    }

    function handleChangeProvince(e) {
        // console.log("e:", e);
        setProvince(e);
    }

    function handleChangeSignal(e) {
        setSignal(e.target.value);
    }

    useEffect( () => {
        // console.log("useEffect_title:", title);
    })

    function onFinish() {
         axios.post('/api/help', {
                title: title,
                info: info,
                contact: contact,
                province: province,
                signal: signal,

        }).then((res) => {
            console.log(res);
        })
        navigate('/index/全部');
    }


    return (
        <Form
            {...formItemLayout}
            layout={'horizontal'}
            form={form}
            initialValues={{
                layout: 'horizontal',
            }}
            onFinish={onFinish}
        >
            <Form.Item label="标题" >
                <Input placeholder="简洁的标题" onChange={handleChangeTitle} required={true}/>
            </Form.Item>
            <Form.Item label="求助信息">
                <Input.TextArea placeholder="所需什么等一些求助信息" onChange={handleChangeInfo} required={true}/>
            </Form.Item>
            <Form.Item label="联系方式">
                <Input placeholder="电话/vx/qq/etc" onChange={handleChangeContact} required={true}/>
            </Form.Item>
            <Form.Item label="所属地区" >
                <Select placeholder="省份/直辖市" onSelect={handleChangeProvince} defaultValue="北京市">
                    {provinces.map( (province) => <Option value={province} >{province}</Option>)}
                </Select>
            </Form.Item>
            <Form.Item label="暗号" required={true}>
                <Input placeholder="任何东西" onChange={handleChangeSignal} required={true}/>
            </Form.Item>
            <Form.Item {...buttonItemLayout}>
                <Button type="primary" htmlType="submit">发 布</Button>
            </Form.Item>
        </Form>
    );
};